// 等待DOM加载完成
 document.addEventListener('DOMContentLoaded', function() {
    // 导航栏滚动效果
    const navbar = document.getElementById('mainNav');
    const backToTop = document.getElementById('backToTop');
    
    // 初始导航栏状态
    navbar.classList.add('navbar-scrolled');
    
    // 监听滚动事件
    window.addEventListener('scroll', function() {
        // 导航栏滚动效果
        if (window.scrollY > 50) {
            navbar.classList.add('navbar-scrolled');
        } else {
            navbar.classList.remove('navbar-scrolled');
        }
        
        // 回到顶部按钮显示/隐藏
        if (window.scrollY > 300) {
            backToTop.classList.add('visible');
        } else {
            backToTop.classList.remove('visible');
        }
        
        // 滚动时高亮当前导航项
        const sections = document.querySelectorAll('section[id]');
        const scrollY = window.pageYOffset;
        
        sections.forEach(current => {
            const sectionHeight = current.offsetHeight;
            const sectionTop = current.offsetTop - 100;
            const sectionId = current.getAttribute('id');
            
            if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
                document.querySelectorAll('.nav-link').forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === '#' + sectionId) {
                        link.classList.add('active');
                    }
                });
            }
        });
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
                
                // 关闭移动设备上的导航菜单
                const navbarToggler = document.querySelector('.navbar-toggler');
                const navbarCollapse = document.querySelector('.navbar-collapse');
                
                if (navbarToggler && navbarCollapse.classList.contains('show')) {
                    navbarToggler.click();
                }
            }
        });
    });
    
    // 回到顶部功能
    backToTop.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    
    // 项目筛选功能
    const filterButtons = document.querySelectorAll('.filter-btn');
    const projectItems = document.querySelectorAll('.project-item');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有按钮的active类
            filterButtons.forEach(btn => btn.classList.remove('active'));
            // 添加当前按钮的active类
            this.classList.add('active');
            
            const filter = this.getAttribute('data-filter');
            
            projectItems.forEach(item => {
                if (filter === 'all' || item.getAttribute('data-category') === filter) {
                    item.style.display = 'block';
                    // 添加淡入动画
                    setTimeout(() => {
                        item.style.opacity = '1';
                        item.style.transform = 'scale(1)';
                    }, 50);
                } else {
                    // 添加淡出动画
                    item.style.opacity = '0';
                    item.style.transform = 'scale(0.8)';
                    setTimeout(() => {
                        item.style.display = 'none';
                    }, 300);
                }
            });
        });
    });
    
    // 初始化项目筛选动画样式
    projectItems.forEach(item => {
        item.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
    });
    
    // 技能图表
    const initSkillsChart = () => {
        const ctx = document.getElementById('skillsChart');
        
        if (ctx) {
            new Chart(ctx, {
                type: 'radar',
                data: {
                    labels: [
                        'HTML5/CSS3',
                        'JavaScript',
                        'React',
                        'Vue.js',
                        'Angular',
                        'Node.js',
                        'UI/UX设计',
                        '响应式设计',
                        '后端开发'
                    ],
                    datasets: [{
                        label: '专业技能',
                        data: [95, 98, 90, 85, 80, 85, 88, 90, 82],
                        backgroundColor: 'rgba(0, 123, 255, 0.2)',
                        borderColor: 'rgba(0, 123, 255, 1)',
                        pointBackgroundColor: 'rgba(0, 123, 255, 1)',
                        pointBorderColor: '#fff',
                        pointHoverBackgroundColor: '#fff',
                        pointHoverBorderColor: 'rgba(0, 123, 255, 1)'
                    }]
                },
                options: {
                    elements: {
                        line: {
                            borderWidth: 3
                        }
                    },
                    scales: {
                        r: {
                            angleLines: {
                                display: true
                            },
                            suggestedMin: 0,
                            suggestedMax: 100
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: true,
                            text: '技术能力评分'
                        }
                    }
                }
            });
        }
    };
    
    // 表单验证和提交
    const contactForm = document.getElementById('contactForm');
    const formResponse = document.getElementById('formResponse');
    
    if (contactForm && formResponse) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const subject = document.getElementById('subject').value;
            const message = document.getElementById('message').value;
            
            // 简单验证
            if (!name || !email || !subject || !message) {
                showFormResponse('请填写所有必填字段', 'error');
                return;
            }
            
            // 验证邮箱格式
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(email)) {
                showFormResponse('请输入有效的邮箱地址', 'error');
                return;
            }
            
            // 模拟表单提交
            formResponse.classList.remove('d-none', 'success', 'error');
            formResponse.textContent = '正在发送...';
            
            setTimeout(() => {
                // 模拟提交成功
                showFormResponse('消息发送成功！我会尽快回复您。', 'success');
                
                // 重置表单
                contactForm.reset();
                
                // 5秒后隐藏提示
                setTimeout(() => {
                    formResponse.classList.add('d-none');
                }, 5000);
            }, 1500);
        });
    }
    
    // 显示表单响应
    const showFormResponse = (message, type) => {
        formResponse.textContent = message;
        formResponse.classList.remove('d-none', 'success', 'error');
        formResponse.classList.add(type);
    };
    
    // 技能进度条动画
    const animateSkillBars = () => {
        const skillBars = document.querySelectorAll('.level-progress');
        
        skillBars.forEach(bar => {
            const width = bar.style.width;
            bar.style.width = '0';
            
            setTimeout(() => {
                bar.style.width = width;
            }, 300);
        });
    };
    
    // 监听元素是否进入视口
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                
                // 如果是技能部分，初始化图表和进度条
                if (entry.target.id === 'skills') {
                    initSkillsChart();
                    animateSkillBars();
                }
                
                // 观察完后取消观察
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    
    // 初始化各部分的进入动画
    const animateSections = () => {
        const sections = document.querySelectorAll('section');
        
        sections.forEach(section => {
            section.style.opacity = '0';
            section.style.transform = 'translateY(20px)';
            section.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
            
            observer.observe(section);
        });
    };
    
    // 初始化页面
    const initPage = () => {
        // 触发一次滚动事件，确保初始状态正确
        window.dispatchEvent(new Event('scroll'));
        
        // 初始化进入动画
        animateSections();
    };
    
    // 启动应用
    initPage();
});